<template>
    <div class="codemirror-page">
        <Row>
            <Col span="24">
                <vue-code-run :value="code" @Beautify="BeautifyAction"></vue-code-run>
            </Col>
            <Col span="24" class="codemirror-page-content">
                <Split v-model="split1">
                    <div slot="left" class="demo-split-pane">
                        <div class="codemirror">
                            <codemirror
                                    v-model="code"
                                    :options="cmOption"
                                    @cursorActivity="onCmCursorActivity"
                                    @ready="onCmReady"
                                    @focus="onCmFocus"
                                    @blur="onCmBlur"
                            />
                        </div>
                    </div>
                    <div slot="right" class="demo-split-pane">
                        <div class="code-box" id="display"></div>
                    </div>
                </Split>
            </Col>
        </Row>
        <!--        <pre class="pre">{{ code }}</pre>-->
    </div>
</template>

<script>
// base style
import 'codemirror/lib/codemirror.css'
// theme css
import 'codemirror/theme/base16-dark.css'
// language
import 'codemirror/mode/vue/vue.js'
// active-line.js
import 'codemirror/addon/selection/active-line.js'
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js'
import 'codemirror/addon/search/searchcursor.js'
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js'
import 'codemirror/addon/search/matchesonscrollbar.js'

import 'codemirror/addon/search/match-highlighter.js'
// keyMap
import 'codemirror/mode/clike/clike.js'

import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'

import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/sublime.js'
// foldGutter
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/indent-fold.js'
import 'codemirror/addon/fold/markdown-fold.js'
import 'codemirror/addon/fold/xml-fold.js'

import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'

import VueCodeRun from '@/components/vue-code-run/index'
import dist from '@/libs/dist'

export default {
  name: 'codemirror-example-vue',
  components: { VueCodeRun },
  data () {
    return {
      code: dist.defaultCode,
      split1: 0.5,
      cmOption: {
        tabSize: 4,
        foldGutter: true,
        styleActiveLine: true,
        lineNumbers: true,
        lineWrapping: true, // 代码折叠
        matchBrackets: true,
        closeBrackets: true,
        line: true,
        keyMap: 'sublime',
        mode: 'text/x-vue',
        theme: 'base16-dark',
        extraKeys: {
          'F9' (cm) {
            cm.setOption('fullScreen', !cm.getOption('fullScreen'))
          },
          'Alt-L' (cm) {
            console.log('33333')
          },
          'Esc' (cm) {
            if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false)
          },
          'Tab': 'autocomplete'
        }
      }
    }
  },
  methods: {
    onCmCursorActivity (codemirror) {
      console.debug('onCmCursorActivity', codemirror)
      let words = codemirror.getValue() + ''
      console.log('输入的内容值', words)
      // 利用正则取出用户输入的所有的英文的字母
      words = words.replace(/[a-z]+[\-|\']+[a-z]+/ig, '').match(/([a-z]+)/ig)
      console.log('获取的单词', words)
      // 将获取到的用户的单词传入CodeMirror,并在javascript-hint中做匹配
      codemirror.ukeys = words
      // 调用显示提示
      codemirror.showHint()
    },
    onCmReady (codemirror) {
      console.debug('onCmReady', codemirror)
    },
    onCmFocus (codemirror) {
      console.debug('onCmFocus', codemirror)
    },
    onCmBlur (codemirror) {
      console.debug('onCmBlur', codemirror)
    },
    BeautifyAction (data) {
      this.code = data
    }
  },
  mounted () {
    let abc = {
      one: {
        two: {
          three: { wq: '222' }
        }
      }
    }
    let cc = abc.one.two
    abc.one.two.three['_p'] = abc.one
    console.log(abc)
    console.log(cc.three._p)
  }
}
</script>

<style lang="less" scoped>
    .example {
        display: flex;
        height: 100%;
    }

    .codemirror-page {
        &-content {
            height: 520px;
        }

        /deep/ .CodeMirror {
            height: 500px;
        }

        .codemirror,
        .pre {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: auto;
        }

        .pre {
            display: block;
            padding: 1rem;
            font-size: 20px;
            line-height: 1.6;
            word-break: break-all;
            word-wrap: break-word;
        }
    }

    .demo-split-pane {
        padding: 10px;
    }
</style>
